import * as THREE from 'three'
import { Float32BufferAttribute } from 'three'
import createApp from '../../core'

/**
 * 用png图片可以得到透明的材质
 */

function createTestMaterial (dom: HTMLElement) {
  const { camera, scene } = createApp(dom)
  // scene.background = new THREE.Color(0xeeeeee)
  camera.position.set(-150, 100, 120)
  camera.lookAt(scene.position)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const ambientLight = new THREE.AmbientLight(0xffffff)
  scene.add(ambientLight)

  const direcitionLight = new THREE.DirectionalLight(0xffffff)
  direcitionLight.position.set(1, 1, 1)
  scene.add(direcitionLight)

  const geometry = new THREE.PlaneGeometry(100, 100)
  const material = new THREE.MeshLambertMaterial({ color: 0xffffff })
  const mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(-100, 0, 0)
  scene.add(mesh)

  const loader = new THREE.TextureLoader()
  import('@/assets/material/tree.png').then(img => {
    loader.load(img.default, texture => {
      material.transparent = true
      material.map = texture
      material.side = THREE.DoubleSide
      material.needsUpdate = true
      //   material.blending = THREE.CustomBlending
      //   material.blendSrc = THREE.SrcAlphaFactor
      //   material.blendDst = THREE.DstAlphaFactor
      //   material.blendEquation = THREE.AddEquation
    })
  })

  const spirteMaterial = new THREE.SpriteMaterial({
    color: 0xff0000,
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending
  })
  const sprite = new THREE.Sprite(spirteMaterial)
  sprite.position.set(0, 0, 0)
  sprite.scale.set(100, 100, 100)
  scene.add(sprite)

  import('@/assets/material/tree.png').then(img => {
    loader.load(img.default, texture => {
      spirteMaterial.map = texture
      spirteMaterial.needsUpdate = true
    })
  })

  const pointGeometry = new THREE.BufferGeometry()
  const pointMaterial = new THREE.PointsMaterial({
    size: 100,
    sizeAttenuation: true,
    transparent: true
  })
  const point = new THREE.Points(pointGeometry, pointMaterial)
  // point.scale.set(100, 100, 100)
  scene.add(point)
  const vertors = [
    40, 60, 0
  ]
  pointGeometry.setAttribute('position', new Float32BufferAttribute(vertors, 3))

  import('@/assets/material/tree.png').then(img => {
    loader.load(img.default, texture => {
      pointMaterial.map = texture
      pointMaterial.needsUpdate = true
    })
  })
}

export {
  createTestMaterial
}
